<template>
  <div>
    <scroll-view :style="{'height':scrollHeight+'px'}" id="scroll-wrap" :scroll-top="scroll_top" scroll-y="true">
      <view class="header" :style="{'margin-top':headerMargin+'px'}" :animation="headerAnimationData">
        <text>刷新数据...</text>
      </view>
      <div
        id="inner-wrap"
        @touchstart="touchstart"
        @touchend="touchend"
        @touchmove="touchmove"
      >
        <div v-for="(item,index) in 100">第{{item}}个元素</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import common from '@/utils/common'

  export default {
    data() {
      return {
        scrollHeight: 0,
        headerMargin: -50,
        offsetPosition: 0,
        headerAnimationData: {},
        offset: 0,
        height: 0, // scroll-wrap 的高度，这个高度是固定的
        inner_height: 0, // inner-wrap 的高度，这个高度是动态的
        scroll_top: 0, // 滚动到位置。
        start_scroll: 0, // 滚动前的位置。
        touch_down: 0 // 触摸时候的 Y 的位置
      }
    },
    onLoad() {
      this.scrollHeight = common.getWindowHeight()
    },
    methods: {
      touchmove(e) {
        console.log(e, "touchmove")
        let self = this
        let currentY = e.mp.changedTouches[0].clientY
        this.offset = currentY - this.touch_down
        // 获取 inner-wrap 的高度
//        wx.createSelectorQuery().select('#inner-wrap').boundingClientRect(function (rect) {
//          console.log(rect, '#inner-wrap')
//          self.inner_height = rect.height;
//        }).exec();
//
//        // 获取 scroll-wrap 的高度和当前的 scrollTop 位置
//        wx.createSelectorQuery().select('#scroll-wrap').fields({
//          scrollOffset: true,
//          size: true
//        }, function (rect) {
//          console.log(rect, '#scroll-wrap')
//          self.start_scroll = rect.scrollTop;
//          self.height = rect.height;
//        }).exec();
        if (this.offset > 0) {
          //下拉
          if (this.offsetPosition <= 80) {
            this.offsetPosition += this.offset
          }
        } else {
          //上拉
          if (this.offsetPosition > -50) {
            this.offsetPosition += this.offset
          }
        }
        this.startShowHeaderAnimation()
        this.touch_down = currentY
      },
      touchstart(e) {
        console.log(e, "touchstart")
        let self = this;
        let touch_down = e.mp.changedTouches[0].clientY;
        this.touch_down = touch_down;

      },
      touchend(e) {
        let current_y = e.mp.changedTouches[0].clientY;
        let self = this;
        /**
         * 1、下拉刷新
         * 2、上拉加载
         */
        console.log(e, "touchend")
        console.log(this.start_scroll, this.scroll_top, "touchend")
        if (current_y > this.touch_down && current_y - this.touch_down > 20 && this.start_scroll == 0) {
          // 下拉刷新 的请求和逻辑处理等
          console.log('11111')
        } else if (current_y < this.touch_down && this.touch_down - current_y >= 20 && this.inner_height - this.height == this.start_scroll) {
          // 上拉加载 的请求和逻辑处理等
          console.log('22222')
        }
      },
      startShowHeaderAnimation() {
        console.log("startShowHeaderAnimation===")
        const animation = wx.createAnimation({
          duration: 1000,
          timingFunction: 'linear'
        })
        animation.translateY(this.offsetPosition).step()
        this.headerAnimationData = animation.export()
      }
    }

  }
</script>

<style>
  #scroll-wrap {
    width: 100vw;
    background: red;
  }

  .header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: green;
  }
</style>
